<template>
  <div class="cate">
    <!-- 固定顶部 （搜索，返回） -->
    <kl-head :title="title"></kl-head>
    <div class="kl-main">
      <div class="kl-left">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            <ul id="cate-menu">
              <li><a @click="optPhone"
                   class="kl-active">手机</a></li>
              <li><a @click="optTv">电视</a></li>
              <li><a @click="optComputer">电脑</a></li>
              <li><a @click="optJiadian">家电</a></li>
              <li><a>路由</a></li>
              <li><a>出行</a></li>
              <li><a>穿戴</a></li>
              <li><a>智能</a></li>
              <li><a>电源</a></li>
              <li><a>健康</a></li>
              <li><a>灯具</a></li>
              <li><a>儿童</a></li>
              <li><a>插线板</a></li>
              <li><a>音频</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="kl-right">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            <div class="goods">
              <div class="category-title">
                <h3>{{ goodsTitle }}</h3>
              </div>
              <div class="box">
                <ul class="clearfix">
                  <li v-for="item in goods"
                      :key="item.id">
                    <router-link :to="'/goodsInfo/'+item.id">
                      <div class="goods-img">
                        <img :src="item.url">
                      </div>
                      <p>{{ item.title }}</p>
                    </router-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import klHead from '../public/head.vue'
import mui from '../../mui/js/mui.min.js'
export default {
  data () {
    return {
      title: '分类',
      goodsTitle: '小米手机',
      goods: null
    }
  },
  created () {
    this.getCategoryShouji() // 默认请求手机页面
  },
  mounted () {
    mui('.mui-scroll-wrapper').scroll({
      // scrollY: true, // 是否竖向滚动
      deceleration: 0.0005 // flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    })
    this.clickActive() // 调用点击高亮显示方法
  },
  methods: {
    // 获取手机商品
    getCategoryShouji () {
      this.$http.get('/categoryShouji').then(result => {
        this.goods = result.body
      })
    },
    // 获取电视商品
    getCategoryDianshi () {
      this.$http.get('/categoryDianshi').then(result => {
        this.goods = result.body
      })
    },
    // 获取电脑商品
    getCategoryDiannao () {
      this.$http.get('/categoryDiannao').then(result => {
        this.goods = result.body
      })
    },
    // 获取家电商品
    getCategoryJiadian () {
      this.$http.get('/categoryJiadian').then(result => {
        this.goods = result.body
      })
    },
    optPhone () {
      this.goodsTitle = '小米手机'
      this.getCategoryShouji()
    },
    optTv () {
      this.goodsTitle = '电视'
      this.getCategoryDianshi()
    },
    optComputer () {
      this.goodsTitle = '电脑'
      this.getCategoryDiannao()
    },
    optJiadian () {
      this.goodsTitle = '家电'
      this.getCategoryJiadian()
    },
    clickActive () {
      let menuList = document.getElementById('cate-menu').querySelectorAll('a')
      for (let i = 0; i < menuList.length; i++) {
        menuList[i].addEventListener('click', function () {
          // 1.清除所有被选中的类样式
          for (var j = 0; j < menuList.length; j++) {
            menuList[j].removeAttribute('class')
          }
          // 2.当前被点击的span应用类样式
          this.className = 'kl-active'
        }, false)
      }
    }
  },
  components: {
    klHead
  }
}
</script>
 <style lang="less" scoped>
html,
body {
  width: 100%;
  height: 100%;
}
.cate {
  .kl-main {
    position: absolute;
    top: 60rem / @baseFontSize;
    bottom: 50px;
    width: 100%;
    // height: 100%;
    // padding-top: 60rem / @baseFontSize;
    .kl-left {
      width: 150rem / @baseFontSize;
      height: 100%;
      float: left;
      position: relative;
      overflow: hidden;
      background-color: #eee;
      a {
        background-color: #eee;
        height: 90rem / @baseFontSize;
        line-height: 90rem / @baseFontSize;
        width: 100%;
        text-align: center;
        border-right: 1px solid #ccc;
        display: block;
        font-size: 22rem / @baseFontSize;
      }
    }
  }
  .kl-right {
    overflow: hidden;
    position: relative;
    height: 100%;
    .goods {
      // width: 100%;
      // height: 100%;
      padding: 0 32rem / @baseFontSize;
      // padding-right: 32rem / @baseFontSize;
      .category-title {
        padding: 40rem / @baseFontSize 0;
        h3 {
          text-align: center;
        }
      }
      .box {
        ul {
          li {
            float: left;
            width: 32%;
            height: 145rem / @baseFontSize;
            overflow: hidden;
            margin-right: 10rem / @baseFontSize;
            margin-bottom: 10rem / @baseFontSize;
            // border: 1px solid #ccc;
            padding: 5rem / @baseFontSize;
            &:nth-child(3n) {
              margin: 0;
            }
            a {
              display: block;
              width: 100%;
              height: 100%;
              .goods-img {
                width: 1rem;
                height: 1rem;
                margin: 0 auto;
                img {
                  width: 100%;
                  height: 100%;
                  vertical-align: middle;
                }
              }
              p {
                text-align: center;
                font-size: 23rem / @baseFontSize;
                padding: 10rem / @baseFontSize 0;
                line-height: 20rem / @baseFontSize;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
}
</style>
